<template>
	<view class="menu-wrap" :class="{'small':small}">
		<view class="title" :class="{'text-align-center':textAlignCenter}" v-if="title">{{title}}</view>
		<uni-grid :column="column" :showBorder="false" :square="false" @change="onChange">
			<uni-grid-item v-for="(item, index) in getMenus" :key="index" :index="index">
				<view class="menu-item" :style="{'height':rowHeight + 'px'}">
					<image class="icon" :src="item.icon" :style="{'height':iconSize + 'px','width':iconSize + 'px'}" />
					<text class="text">{{ item.label }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	import store from '@/store';
	export default {
		props: {
			menus: {
				type: Array,
				default: function() {
					return []
				}
			},
			column: {
				type: Number,
				default: function() {
					return 3
				}
			},
			small: {
				type: Boolean,
				default: function() {
					return false
				}
			},
			iconSize: {
				type: Number,
				default: function() {
					return 44
				}
			},
			title: {
				type: String,
				default: function() {
					return ''
				}
			},
			textAlignCenter: {
				type: Boolean,
				default: function() {
					return false
				}
			},
			rowHeight: {
				type: Number | String,
				default: function() {
					return 'auto'
				}
			}
		},
		data() {
			return {
				defMenus: [],
				currentIndex: 0
			};
		},
		created() {
			for (var i = 0; i < this.column; i++) {
				this.defMenus.push({
					judgeIsLogin: false,
					label: `模块${i+1}`,
					icon: require('@/static/icon/menu/def.png'),
					path: ''
				})
			}
		},
		computed: {
			getMenus() {
				return this.menus.length > 0 ? this.menus : this.defMenus;
			}
		},
		methods: {
			// 宫格点击
			onChange(e) {
				let index = e.detail.index;
				this.currentIndex = e.detail.index
				let item = this.menus.length > 0 ? this.menus[index] : this.defMenus[index];
				
				// 如果是查看所有，打开的是完整列表
				if("全部班型" === item.label) {
					this.toPage(item)
				}
				
				/**
				 * 根据 item.judgeIsLogin 参数判断
				 * 当前模块是否需要用户登录
				 */
				if (item.judgeIsLogin) {
					let storeUserInfo = store.state.userInfo;
					if (!storeUserInfo.token) { // nvue页面读取不到vuex里面数据，将取缓存
						storeUserInfo = uni.getStorageInfoSync("userInfo");
					}

					let token = storeUserInfo.token;
					if(token) {
						// 校验token是否有效 无效清理本地数据，需重新登录
						this.$api.login.check_wx_token({ token }).then((res) => {
							if(res.code !== 200) {
								//window.sessionStorage.clear();
								uni.clearStorageSync();
								//console.log(token)
								this.judgeLogin(()=>{
									this.toPage(item)
								}, null)
								console.log('登录信息校验失败')
							} else {
								//console.log(token)
								this.judgeLogin(()=>{
									this.toPage(item)
								}, storeUserInfo)
								console.log('登录信息校验成功')
							}
						}).catch(err => {
							//window.sessionStorage.clear();
							uni.clearStorageSync();
							//console.log(token)
							this.judgeLogin(()=>{
								this.toPage(item)
							}, null)
							console.log('登录信息校验失败', err)
						})
					} else {
						this.judgeLogin(()=>{
							this.toPage(item)
						}, null)
					}
				} else {
					if (item.label === "切换账号") {
						if (uni.getStorageSync('userInfo')) { //登录用户需要弹出询问
							this.isToast(item)
						} else {
							// this.toPage(item)
							uni.showModal({
								title: '提示',
								content: `您还没有登陆哦`,
								cancelText: '我再看看',
								confirmText: '去登陆',
								cancelColor: '#81B435',
								success: (res) => {
									if (res.confirm) {
										this.toPage(item)
									}
								}
							})
						}
					}else if (item.label === "退出登录") {
						if (uni.getStorageSync('userInfo')) { //登录用户需要弹出询问
							this.isQuit(item)
						} else {
							// this.toPage(item)
							uni.showModal({
								title: '提示',
								content: `您还没有登陆哦`,
								cancelText: '我再看看',
								confirmText: '去登陆',
								cancelColor: '#81B435',
								success: (res) => {
									if (res.confirm) {
										this.toPage(item)
									}
								}
							})
						}
					} else if (item.label === "在线反馈") {
						uni.showModal({
							title: '在线客服',
							content: `400-888-8888`,
							cancelText: '取消',
							confirmText: '确认',
							cancelColor: '#81B435',
							success: (res) => {
								if (res.confirm) {
									uni.makePhoneCall({
									    phoneNumber: '400-888-8888' //仅为示例
									});
								} else if (res.cancel) {
									console.log('用户点击取消按钮');
								}
							}
						});
					} else {
						this.toPage(item)
					}
				}

			},
			
			isQuit(item) {
				uni.showModal({
					// title: '提示',
					content: `您确定要退出当前账号吗？`,
					cancelText: '取消',
					confirmText: '确认',
					cancelColor: '#81B435',
					success: (res) => {
						if (res.confirm) {
							this.$api.login.logout().then(res => {
								// #ifdef H5
								window.sessionStorage.clear();
								// #endif
								// #ifndef H5
								uni.clearStorageSync();
								// #endif
								this.toPage(item)
			
							}).catch(err => {
								uni.showToast({
									icon: 'none',
									title: `退出失败`
								});
							})
			
						} else if (res.cancel) {
							console.log('用户点击取消按钮');
						}
					}
				});
			},
			isToast(item) {
				uni.showModal({
					// title: '提示',
					content: `您确定要切换当前账号吗？`,
					cancelText: '取消',
					confirmText: '确认',
					cancelColor: '#81B435',
					success: (res) => {
						if (res.confirm) {
							this.$api.login.logout().then(res => {
								// #ifdef H5
								window.sessionStorage.clear();
								// #endif
								// #ifndef H5
								uni.clearStorageSync();
								// #endif
								this.toPage(item)

							}).catch(err => {
								uni.showToast({
									icon: 'none',
									title: `切换账号失败`
								});
							})

						} else if (res.cancel) {
							console.log('用户点击取消按钮');
						}
					}
				});
			},
			toPage(item) {
				if(item.type && item.type === 'model') {
					// 先生成订单、调预支付、再调支付
					
					// 班型时， 直接跳转支付
					// uni.requestPayment({
					// 	provider: 'wxpay',
					// 	timeStamp: String(Date.now()),
					// 	nonceStr: 'A1B2C3D4E5',
					// 	package: 'sign=WXPay',
					// 	signType: 'MD5',
					// 	paySign: '',
					// 	success: function(res) {
					// 		console.log('success:' + JSON.stringify(res));
					// 	},
					// 	fail: function(err) {
					// 		console.log('fail:' + JSON.stringify(err));
					// 	}
					// });
					uni.navigateTo({
						url: '/subpages/home/facetofaceClass?index=' + this.currentIndex
					});
				} else {
					if (item.path !== '') {
						var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
						var objExp = new RegExp(Expression);
						if (objExp.test(item.path)) {
							this.$store.commit('setWebViewUrl', item.path);
							uni.navigateTo({
								url: '/subpages/home/webView'
							});
						} else {
							uni.navigateTo({
								url: item.path
							});
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: `跳转${item.label}`
						});
					}
				}
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.menu-wrap {
		width: 686upx;
		margin: 16upx auto;
		text-align: left;

		.title {
			margin: 16upx 0 0 0;
			font-size: $uni-font-size-base;
		}

		.text-align-center {
			text-align: center;
		}

		.menu-item {
			text-align: center;
			font-size: $uni-font-size-base;
			color: $uni-text-color;

			.icon {
				width: 88upx;
				height: 88upx;
				display: block;
				margin: 0 auto;
			}
		}
	}

	.menu-wrap.small {
		.menu-item {
			padding-top: 32upx;
		}

		.text {
			display: block;
			margin-top: 16upx;
		}
	}
</style>
